<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no'>
	<title>Document</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		ul li{
			list-style: none;
		}
		.main{
			width: 300px;
			margin: 10px auto;
			overflow: hidden;
			height: 200px;

		}
		.img-cntr{
			height: 200px;

		}
		.img-cntr:after{
			clear: both;
			overflow: hidden;
			content: '';
			display: block;
			height: 0;
		}
		.img-cntr li{
			float: left;
			width:300px;
			height: 200px;
		}
		.img-cntr li img{
			max-width: 100%;
		}

	</style>
	<script src="http://192.168.2.61:8080/target/target-script-min.js#anonymous"></script>
</head>
<body>
	<div class="main">
		<ul class="img-cntr" id='scroll1'>
			<li><img src="./img/1.jpg"></li>
			<li><img src="./img/2.jpg"></li>
			<li><img src="./img/3.jpg"></li>
		</ul>
	</div>
	<div class="main">
		<ul class="img-cntr" id='scroll2'>
			<li><img src="./img/1.jpg"></li>
			<li><img src="./img/2.jpg"></li>
			<li><img src="./img/3.jpg"></li>
		</ul>
	</div>
	<script src='./zepto.js'></script>
	<script src='./mobileCarousel.js'></script>
	<script>
		x1 = mobileCarouselX({cntrEl:'#scroll1',child:'li'})
		x2 = mobileCarouselX({cntrEl:'#scroll2',child:'li',isAuto:false})
	</script>
</body>
</html>